<template>
  <div class="withdrawl-page">
    <assets-head title="">
      <img src="../../assets/image/assets-center/exchange.png" alt="exchange-img" class="w-44 h-38"
           @click="goRouter('/assetsCenter/rechargeWithdrawRecord?back=1')" />
    </assets-head>
    <div class="px-32 pb-48">
      <!--<h1 class="font-52 pt-40 textColor">{{ $t('提币') }} USDT</h1>-->
      <h1 class="font-52 pt-40 textColor">{{ $t('提币 ') + value }} </h1>
      <!--<p class="text-grey font-30 mt-26">{{ $t('提币 USDT 到数字币地址') }}</p>-->
      <p class="text-grey font-30 mt-26">{{ $t('提币 ') + value + $t(' 到数字币地址') }}</p>
      <div @click="showSymbol = true"
           class="flex border-grey items-center items-center justify-between rounded-lg mt-42 inputBackground textColor">
        <input v-model="value" class="flex-1 h-100 border-none px-16 inputBackground textColor" />
        <p class="flex items-center">
          <span>{{ $t('选择币种') }}</span>
          <img src="@/assets/image/icon-left_arrow.png" alt="logo" class="w-20 h-33 ml-30 mr-40"
               style="transform: rotate(-90deg)" />
        </p>
      </div>
      <p class="font-35 mt-44 textColor">{{ $t('区块链网络') }}</p>
      <ul class="flex mt-22  flex-wrap">
        <li class="w-210 h-96 mb-20 mr-40 rounded rounded-lg border border-solid flex justify-center items-center textColor"
            :class="blockchainIndex == index ? 'active' : ''" v-for="(item, index) in blockList" :key="item.id"
            @click="changeBlockchain(item, index)">{{ item.blockchain_name }}</li>
      </ul>
      <p class="font-35 mt-22 textColor">{{ $t('地址') }}</p>
      <div class="inputBackground flex items-center justify-between h-96 rounded mt-22">
<!--        <span :placeholder="$t('长按粘贴')" class="h-full flex-1 border-none bg-none px-16 textColor"-->
<!--               v-model="address" disabled />-->
        <div class="pl-16 textColor">
          <span :class="(bindAddressState === '-1' || bindAddressState === '0') ? 'text-red':'' ">{{address}}</span>
        </div>
        <div class="flex items-center ">
          <span class="colorMain mr-30" @click="isShowAdress = true;bindAddress=''" v-if="!withdrawAddressStaus">{{ $t('绑定') }}</span>
          <van-icon name="replay" class="colorMain mr-30" @click="getWithdrawAddress"/>

<!--          <span class="colorMain mr-30" @click="getWithdrawAddress" v-else>{{ $t('获取') }}</span>-->
          <!--                    <span class="colorMain" @click="pastCont">{{ $t('粘贴') }}</span>-->
          <!--                    <div>
                                  <img @click="clickCode()" src="@/assets/image/public/scan.png" alt="logo"
                                      class="w-65 h-65 ml-20 mr-30" />
                              </div>-->
        </div>
      </div>
      <p class="font-35 mt-44 textColor">{{ $t('数量') }}</p>
      <div class="inputBackground flex items-center justify-between h-96 rounded mt-22">
        <input :placeholder="$t('请输入提币数量')" maxlength="10"
               class="h-full flex-1 border-none bg-none px-16 font-22 textColor" type="number" v-model="amount"
               @input="changeInput" />
        <p class="flex items-center">
          <!--<span class="text-grey">USDT</span>-->
          <span class="text-grey">{{ value }}</span>
          <span class="colorMain ml-20 mr-30" @click="allBtn">{{ $t('全部') }}</span>
        </p>
      </div>
      <p class="flex justify-between text-grey mt-22">
        <span>{{ $t('可用') }}</span>
        <!--<span>{{ usdtBalance }} USDT</span>-->
        <span>{{ getwei(usdtBalance * 1, numLenth) }} {{ value }}</span>
      </p>
      <p class="text-grey mt-64">{{ $t('可到账数量') }}</p>
      <div class="font-40 mt-20 fon-bold ">
        <span class="font-40 font-700 textColor"> {{ volume_last || '0.00' }}</span>
        <!--<span class="font-32 ml-5 text-grey">USDT</span>-->
        <span class="font-32 ml-5 text-grey">{{ value }}</span>
      </div>
      <p class="text-grey mt-22">{{ $t('提现费用') }}：{{ fee || '0.00' }} {{ value }}</p>
      <p class="text-black mt-46 textColor">{{ $t('提币说明') }}：
      </p>
      <div class="text-grey mt-10" v-html="tip"></div>
      <van-button class="w-768 h-100 rounded flex justify-center items-center mt-56  text-white btnMain border-none"
                  @click="showDetail">
        {{ $t('提现') }}</van-button>

    </div>
    <van-popup v-model="show" position="bottom">
      <div class="pop-box relative">
        <img src="@/assets/image/icon-close.png" class="w-38 h-38 absolute right-20 top-20" @click="show = false" />
        <p class="font-38 text-center pt-60 textColor">{{ $t('确认订单') }}</p>
        <p class="font-35 mt-49 text-grey text-center">{{ $t('实际到账') }}</p>
        <p class="font-50 mt-23 text-center textColor">{{ volume_last }} <span class="text-grey font-35">
                        {{ value }}</span></p>
        <ul class="border-b-color px-32 pb-34">
          <li class="flex justify-between font-32 mt-25 items-center">
            <span class="textColor">{{ $t('提币地址') }}</span>
            <span class="text-grey font-26">{{ address }}</span>
          </li>
          <li class="flex justify-between font-32 mt-25">
            <span class="textColor">{{ $t('主网络') }}</span>
            <span class="text-grey">{{ blockName }}</span>
          </li>
          <li class="flex justify-between font-32 mt-25">
            <span class="textColor">{{ $t('提现来源账户') }}</span>
            <span class="text-grey">{{ $t('钱包账户') }}</span>
          </li>
        </ul>
        <ul class="px-32 mt-32">
          <li class="flex justify-between font-32 mt-25">
            <span class="textColor">{{ $t('币种') }}</span>
            <span class="text-grey">{{ value }}</span>
          </li>
          <li class="flex justify-between font-32 mt-25">
            <span class="textColor">{{ $t('金额') }}</span>
            <span class="text-grey">{{ amount }}&nbsp;{{ value }}</span>
          </li>
          <li class="flex justify-between font-32 mt-25">
            <span class="textColor">{{ $t('网络手续费') }}</span>
            <span class="text-grey">{{ fee }}&nbsp;{{ value }}</span>
          </li>
        </ul>
        <p class="px-32 mt-49 font-30 textColor">
          1. {{ $t('请确保您输入了正确的提币地址并且您选择的转账网络与地址相匹配') }}
        </p>
        <p class="px-32 mt-40 font-30 textColor">2. {{ $t('提币订单创建后不可取消。') }}</p>
        <p class="w-768 h-100 rounded flex justify-center items-center mt-56 mb-48 btnMain text-white ml-32"
           @click="onConfirm">
          {{ $t('确定') }}</p>
      </div>
    </van-popup>
    <!-- 币种 -->
    <van-action-sheet v-model="showSymbol" :actions="actions.filter(item => item.name !== value)" @select="onSelect" />
    <bar-scan :scancode="scancode" v-if="scancode" @ok="getResult"></bar-scan>

    <van-popup v-model="isShowAdress" round>
      <div class="bindWithDrawBox">
        <div class="contentBox px-32 pb-40">
          <p class="font-35 mt-44 textColor">
            <span>{{ $t('区块链网络') }}:</span>
            <span>{{this.blockName}}</span>
          </p>
          <p class="font-35 mt-22 textColor">{{ $t('地址') }}</p>
          <div class="inputBackground flex items-center justify-between h-96 rounded mt-22">
            <input :placeholder="$t('长按粘贴')" class="h-full flex-1 border-none bg-none px-16 textColor"
                   v-model="bindAddress" />
            <div class="flex items-center">
              <span class="colorMain mr-30" @click="pastCont">{{ $t('粘贴') }}</span>
              <!--                  <div>
                                  <img @click="clickCode()" src="@/assets/image/public/scan.png" alt="logo"
                                       class="w-65 h-65 ml-20 mr-30" />
                                </div>-->
            </div>
          </div>
          <div class="flex justify-center items-center h-76 rounded-full text-center btnMain text-white mt-40" @click="bindWithdrawAddress">
            {{this.$t('确定')}}
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { Popup, ActionSheet, Toast, Dialog } from "vant"
import Axios from "@/API/recharge.js"
import AxiosWithdraw from "@/API/withdraw.js"
import assetsHead from "@/components/assets-head";
import BarScan from '@/components/scan/scan.vue';
import { _getAllWallet } from "@/API/fund.api";
import AxiosUser from "@/API/userCenter";
import { mapGetters } from "vuex";
import { _info } from '@/API/user.api'
export default {
  name: "withdrawPage",
  components: {
    assetsHead,
    [Popup.name]: Popup,
    [ActionSheet.name]: ActionSheet,
    BarScan
  },
  data() {
    return {
      tip: '',
      value: 'USDT', //选中的币种
      show: false,
      showSymbol: false,
      actions: [{ name: 'USDT' }, { name: 'BTC' }, { name: 'ETH' }],
      blockList: [],
      blockchainIndex: "",
      usdtBalance: "", //余额
      amount: "",//提现金额
      fee: "", //手续费
      volume_last: "",//到账金额
      blockName: "",//当前链名称
      address: "",// 二维码扫描结果
      scancode: false,//控制是否使用扫一扫功能
      withdraw_fee_type: '',
      percent: 0,
      numLenth: 3,
      withdrawAddressStaus:false,//是否有绑定提现地址
      isShowAdress:false,//绑定提现地址弹窗
      bindAddress:"",
      bindAddressState:0,// -1 未绑定 / 0 审核中 / 1 已审核
      googleverif:null
    }
  },
  computed: {
    ...mapGetters('user', ['userInfo'])
  },
  async created() {
    if(this.userInfo.token){
      await this.getInfo();
      const res = await AxiosUser._getIsGoogleAuth({ code: 'google_auth_secret_open' });
      let isGetdata = false;

      if (res.data.google_auth_secret_open === '1') {
        if (this.googleverif) {
          isGetdata = true
        } else {
          isGetdata = false;
          Dialog({
            message: this.$t('未绑定谷歌验证器，暂时无法提现，点击前往绑定'),
            theme: 'round-button',
            confirmButtonColor: '#2C78F8',
            confirmButtonText: this.$t('确定'),
          }).then(() => {
            this.$router.replace('/bindVerify?type=3')
          });
          return;
        }
      } else {
        isGetdata = true
      }

      if (isGetdata) {
        await this.getBlock(this.value);
        await this.getWithdrawAddress()
        this.getAvailable(this.actions[0].name);

        Axios.getRechargeTips({
          language: this.$i18n.locale,
          token: this.$store.state.user.userInfo.token,
          content_code: '003',
        }).then(res => {
          this.tip = res.data.content
        }).catch(err => {
          if (err.code === 'ECONNABORTED') { this.$toast(this.$t('网络超时！')); }
          else if (err.msg !== undefined) { this.$toast(this.$t(err.msg)); }
        })

        AxiosWithdraw.WithdrawFee({
          amount: 1,
          channel: this.value + '_' + this.blockName
        }).then((res) => {
          this.withdraw_fee_type = res.data.withdraw_fee_type
          if (this.withdraw_fee_type == 'rate') {
            this.percent = res.data.fee
          } else {
            this.fee = res.data.fee;
          }
        });
      }
    }
  },
  methods: {
    async getInfo() {
      try {
        const res = await _info();
        this.googleverif = res.googleverif;
      } catch (error) {
        console.error('Error fetching info:', error);
      }
    },
    bindWithdrawAddress(){
      Axios._bindWithdrawAddress({
        channel:this.blockName,
        currency:this.value,
        address:this.bindAddress,
      }).then(res=>{
        // console.log('resres2',res)
/*        if(res.code ==='0'){
          this.$toast(this.$t('提交成功，提现地址审核中'))
        }*/
        this.getWithdrawAddress()
        this.isShowAdress = false
      }).catch(err=>{
        // console.log('errerr2',err)
      })
    },
    getWithdrawAddress(){
      this.address = '' // 进来先重置一下
      Axios._getWithdrawAddress({
        channel:this.blockName,
        currency:this.value,
      }).then(res=>{
        // console.log('resres',res)
        this.address = res.data.message
        this.withdrawAddressStaus = true
        this.bindAddressState = res.data.state
      }).catch(err=>{
        // console.log('errerr',err)
        this.withdrawAddressStaus =false
        this.bindAddressState = err.data.state
        switch (this.bindAddressState){
          case '-1':
            this.address = this.$t('未绑定提现地址')
                break
          case '0':
            this.address = this.$t('审核中')
                break
          default:
            this.address =''
        }
      })
    },
    getwei(value, numLenth) {
      // console.log(numLenth)
/*      let str = value.toString();
      let strIndex = str.indexOf('.');
      if (strIndex === -1) return str;
      str = str.substring(0, strIndex + numLenth);
      console.log(str, numLenth)*/
      let str = this.$bigDecimal.round(value,numLenth)
      return str;
    },
    // 打开相机
    clickCode() {
      this.scancode = true;
    },
    //返回扫描结果并关闭摄像头
    getResult(result) {
      this.bindAddress = result;
      if (result !== "") {
        this.scancode = false;
      }
    },
    showDetail() {
      if (this.address.length > 63 || this.address.length == 0) {
        Toast(this.$t('提现地址格式错误'))
        return
      }
      if (!this.amount) {
        Toast(this.$t('请输入正确数量'))
        return
      }
      if (this.amount / 1 > this.usdtBalance / 1) {
        Toast(this.$t('金额不足'))
        return
      }
      this.show = true;
    },
    goRouter(params) {
      this.$router.push({
        path: params,
        query: {
          type: '2'
        }
      });
    },
    // onConfirm() {
    //     this.$router.push('/withdraw/withdrawSumbit')
    // },
    //选中币种
    async onSelect(item) {
      this.amount = ''
      this.volume_last = ''
      this.fee = ''
      this.showSymbol = false;
      this.value = item.name;
      this.withdraw_fee_type = ''
      await this.getBlock(item.name);
      await this.getAvailable(item.name)
      if (item.name == 'BTC' || item.name == 'ETH') {
        this.numLenth = 7
        AxiosWithdraw.WithdrawFee({
          amount: 1,
          channel: this.value + '_' + this.blockName
        }).then((res) => {
          this.withdraw_fee_type = res.data.withdraw_fee_type
          if (this.withdraw_fee_type == 'fixed') {
            this.fee = res.data.fee;
          } else {
            this.percent = res.data.fee
          }
        });
      } else {
        this.numLenth = 3
      }
      this.getWithdrawAddress()
    },
    //根据币种获取链地址
    async getBlock(symbol) {
      try {
        const res = await Axios.getBlock({ coin: symbol});
        this.blockList = res.data;
        this.blockName = res.data[0].blockchain_name;
      } catch (error) {
        // console.log('币种获取链地址接口错误');
      }

    },
    //选中链名称
    changeBlockchain(item, index) {
      this.blockchainIndex = index;
      this.blockName = item.blockchain_name;
      this.getWithdrawAddress()
    },
    //获取钱包余额
    getAvailable(symbol) {
      _getAllWallet().then((res) => {
        let walletList = res.extends;
        let initObj = walletList.find(item => {
          return item.symbol.toLowerCase() == symbol.toLowerCase()
        })
        this.usdtBalance = initObj.usable
      });
    },
    //点全部
    allBtn() {
      this.amount = this.getwei(this.usdtBalance, this.numLenth);
      this.changeInput()
    },
    //输入改变
    changeInput() {
      if (this.amount === '') {
        this.volume_last = '0.00'
        return
      }
      if (this.amount.length > 11) {
        this.amount = this.amount.slice(0, 11)
      }

      if (this.withdraw_fee_type == 'part') {
        AxiosWithdraw.WithdrawFee({
          amount: this.amount,
          channel: this.value + '_' + this.blockName
        }).then((res) => {
          this.fee = res.data.fee;
          this.volume_last = res.data.volume_last;
        });
      } else if (this.withdraw_fee_type == 'rate') {
        if (this.amount == '') {
          this.volume_last = 0
        } else {
          this.fee = this.getwei(this.$bigDecimal.multiply(this.percent, this.amount), this.numLenth)
          this.volume_last = this.getwei(this.amount * 1 - this.percent * this.amount, this.numLenth)
        }
      } else {
        if (this.amount * 1 < this.fee * 1) {
          console.log('a')
          this.volume_last = 0
        } else {
          this.volume_last = this.getwei(this.amount * 1 - this.fee * 1, this.numLenth)
        }
      }

    },
    //提币提交
    onConfirm() {
      if (!this.amount) {
        this.$toast(this.$t('请输入数量'));
        return;
      }

      let numReg = /^[0-9]+([.]{1}[0-9]+){0,1}$/;
      if (!numReg.test(this.amount)) {
        this.$toast(this.$t('请输入数字'));
        return;
      }

      if (!this.address) {
        this.$toast(this.$t('请输入提现地址'));
        return;
      }

      if (this.amount && this.address) {
        this.$router.push({
          path: '/withdraw/securityVerification',
          query: {
            amount: this.amount,
            from: this.address,
            channel: this.value + '_' + this.blockName
          }
        })
        // AxiosWithdraw.WithdrawApply({
        //     session_token:this.sessionToken,
        //     amount:this.amount,
        //     from:this.address,
        //     channel:this.value+'_'+ this.blockName
        // }).then((res)=> {
        //     if(res.code==0) {
        //         this.$router.push({
        //             path:"/withdraw/withdrawSumbit"
        //         });
        //     }else{
        //       this.$toast(this.$t(res.msg));
        //     }
        //     this.getToken();
        // });
      } else {
        this.$toast(this.$t('请输入提币数量'));
      }
    },
    async pastCont() {
      this.bindAddress = await navigator.clipboard.readText();
    }
  }
}
</script>
<style>
.withdrawl-page {
  width: 100%;
  box-sizing: border-box;
  font-size: 26px;
}

.van-popup.van-popup--bottom {
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
}
</style>
<style lang="scss" scoped>
.pop-box {
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
}

.color-blue {
  color: #2C78F8;
}

.bg-grey-light {
  background: #F5F5F5;
}

li {
  &.active {
    @include themify() {
      border-color: themed("color_main");
    }

    @include themify() {
      color: themed("color_main");
    }
  }
}

.van-button--default {
  color: #fff;
}
.bindWithDrawBox{
  min-width: 96vw;
  border-radius: 8px;
  .contentBox{
    margin: 0 auto;
  }
}
</style>
